<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 思路很重要 
    Vue是操作数据的思维，不要再用操作DOM的思维了

    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #catalogNav span{
            margin-left: 10px;
        }
        #catalogNav strong{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="catalogNav">
            <!-- 利用template，不存在与html的特性，如果直接用strong或span，思路不好想 -->
            <template v-for="(item,index) in catalog" >
                <!-- 利用vif 判断被点击后的电影类型，关联span中的v-on:click -->
                <strong :key="index" v-if="item.typename == choiceType">{{item.typename}}</strong>
                <span  :key="index" v-else @click="choiceType = item.typename">{{item.typename}}</span>
            </template>
            
        </div>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:function(){
                return {
                    //catalog 目录
                    //写项目的时候，一般都是，数据一般读写成 数组套对象
                    catalog:[
                        {typename:"全部"},
                        {typename:"情感"},
                        {typename:"动画"},
                        {typename:"电影"},
                        {typename:"电视剧"}
                    ],
                    choiceType:"全部"
                }
            },
            methods:{
                
            }
        })
    </script>
</body>
</html>